<script setup lang="ts">
const toMySet = () => {
  uni.navigateTo({
    url: '/pages/driver-set/driver-set',
  })
}

const toHistory = () => {
  uni.navigateTo({
    url: '/pages/my/history',
  })
}
const toBill = () => {
  uni.navigateTo({
    url: '/pages/my/bill',
  })
}
</script>

<template>
  <view class="my-page">
    <navigator class="settings" url="/pages/settings/settings" hover-class="none">
      <text class="iconfont icon-setting"></text>
    </navigator>
    <!-- Banner图 -->
    <image class="banner" src="@/static/imgs/logo_icon.png" mode="widthFix"></image>
    <!-- 订单大厅 -->
    <view class="list">
      <!-- <view class="item">
        <text class="iconfont icon-order"></text>
        <view class="text">订单大厅</view>
        <text class="iconfont icon-jinru"></text>
      </view> -->
      <view class="item" @tap="toHistory">
        <text class="iconfont icon-order-inspection"></text>
        <view class="text">历史跑单</view>
        <text class="iconfont icon-jinru"></text>
      </view>
      <view class="item" @tap="toBill">
        <text class="iconfont con-dingdanzhuangtai"></text>
        <view class="text">我的账单</view>
        <text class="iconfont icon-jinru"></text>
      </view>
      <view class="item" @click="toMySet">
        <text class="iconfont con-dingdanzhuangtai"></text>
        <view class="text">接单设置</view>
        <text class="iconfont icon-jinru"></text>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import '@/styles/variables.scss';
page {
  height: 100%;
  overflow: hidden;
}
.my-page {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;

  .settings {
    position: absolute;
    top: 40rpx;
    right: 60rpx;
  }
  .banner {
    width: 100%;
    // 假设希望图片的高度是根据宽度自适应
    height: 400rpx;
  }

  .list {
    width: 100%;
    display: flex;
    flex-direction: column;

    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx;
      border-bottom: 1rpx solid #e5e5e5;

      .iconfont {
        font-size: 40rpx;
      }

      .text {
        flex-grow: 1;
        margin-left: 20rpx;
        font-size: 32rpx;
      }
    }
  }
}
</style>
